第一章：CSS與文件（1）

第 11 屆 iThome 鐵人賽

DAY 1

Modern Web

CSS大全閱讀筆記系列第 1 篇

11th鐵人賽

Camellus

2019-09-17 22:53:32

967 瀏覽

分享至

CSS全名（Cascading Style Sheet，階層樣式表），於1994提出，主要是提供一個可以依據特定優先順序組合，且簡單的宣告式造型語言。
CSS主要以「元素」為文件的基礎，大致有兩種區分方式：
a. 置換元素＆非置換元素
- 置換元素：元素內容會被置換成其他內容，此類元素需要給出指向，才能顯示內容，如：img（需要用scr=''給出來源）、input（需要指定是屬於radio buttom、checkbox、text input⋯⋯哪種類型）。
- 非置換元素：HTML中大部分元素都是屬於非置換元素，會直接產生元素本身的內容，顯示於一方框中。
b. 區塊元素＆行內元素
- 區塊元素：產生一個預設填滿父層且無法與其他元素並排的元素，會形成前後斷行，最具代表性的就是div和p，list也屬於此類（ol和ul），但會在最前端產生標記。
- 行內元素：會在文字所在行產生元素方框，但不會影響周遭的元素呈現，也不會形成斷行，a就屬於此類。
- 另外，HTML中，區塊元素不可放在行內元素之內。
連結CSS文件的方法：
a. link標記（外部樣式表）：
- <link rel="stylesheet" type="text/css" href="" media="all">
- 放在head元素內。
- rel代表關係（目前是指stylesheet），也可以改用替代樣式表（alternate stylesheet），讓使用者依需求使用。
- type代表類型，可以讓瀏覽器知道現在帶入的CSS文件。
b. style元素（內嵌樣式表）：
- <style type="text/css">......</style>
- 一定要搭配text/css使用。
c. @import指令：
- <style type="text/css">@import url();......</style>
- 放在style元素內，置於其他CSS規則之前。
d. HTTP連結：
- 在Apache伺服器上在.htaccess檔案中或在伺服器的httpd.conf檔案中加入。
e. 行內樣式：
- <p style="color: red;">......</p>
- 只想指定某個元素，而不想使用外部或內嵌樣式表時使用。
- 一般不建議使用，會失去CSS集中管理、一致性的特點。